<template>
	<view class="">
		<image src="../../../static/images/logo/ban.jpg" style="width: 100%; margin-top: -40rpx;" mode="aspectFill">
		</image>

		<u-sticky bgColor="#fff">
			<u-tabs :list="tab_list" lineColor="#43a0ff" :current="tab_current" :scrollable="false"
				:activeStyle="{color: '#43a0ff', 'font-weight': 'bold' }" @change="tab_change"
				class="bg-white padding-xs">
			</u-tabs>
		</u-sticky>

		<view class="margin-top-xs">
			<view v-for="(item,index) in task_list" :key="index" class="margin-top-sm flex-row bg-white padding-sm"
				@click="to_detail(item.id)">
				<image :src="item.taskImg" mode="aspectFill" style="width: 180rpx; height: 180rpx;"></image>
				<view class="margin-left-sm " style="width: 500rpx;">
					<view class="flex-row-bt">
						<view class="text-lg text-bold text-overhidden-2" style="width: 70%;">{{item.location}}</view>
						<view class="text-red">{{tab_current=='0'?'待处理':'已完成'}}</view>
					</view>
					<view class="margin-top-xs">{{item.fullAddress}}</view>
					<view class="margin-top-xs">发布者： {{item.createBy}}</view>
					<view class="margin-top-xs">{{item.createTime}}</view>
				</view>
			</view>
			<divider marginTop="40rpx" marginBottom="40rpx"></divider>
		</view>
	</view>
</template>

<script>
	import {
		getAppTask
	} from '../../../api/task.js'

	export default {
		data() {
			return {
				tab_list: [{
					name: '待处理',
					badge: {
						value: 0,
					}
				}, {
					name: '已完成',
					badge: {
						value: 0,
					}
				}],
				tab_current: 0,

				param: {
					phone: '',
					page: 1,
					pageSize: 6,
					key: '0'
				},

				task_list: []
			}
		},
		onLoad() {
			this.param.phone = uni.getStorageSync('phone')
			//请求待处理任务
			this.getWaitTask()
			//请求已完成任务
			this.getFinishTask()
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			if (this.task_list.length < this.tab_list[this.tab_current].badge.value) {
				this.param.page++
				getAppTask(this.param).then(res => {
					console.log(JSON.stringify(res.data.list))
					for (let i = 0; i < res.data.list.length; i++) {
						this.task_list.push(res.data.list[i])
					}
				})
			}
		},
		onPullDownRefresh(){
			
			this.tab_list=[{
					name: '待处理',
					badge: {
						value: 0, 
					}
				}, {
					name: '已完成',
					badge: {
						value: 0,
					}
				}],
			this.getWaitTask()
			this.getFinishTask()
			setTimeout(()=> {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			tab_change(e) {
				console.log(JSON.stringify(e))
				if (this.tab_current != JSON.parse(JSON.stringify(e)).index) {
					this.tab_current = JSON.parse(JSON.stringify(e)).index
					this.param.key = this.tab_current.toString()
					this.param.page = 1
					getAppTask(this.param).then(res => {
						this.task_list = res.data.list
					})
				}
			},

			//请求待处理任务
			getWaitTask() {
				getAppTask(this.param).then(res => {
					// console.log(JSON.stringify(res))
					this.tab_list[0].badge.value = res.data.total
					this.task_list = res.data.list
				})
			},

			//请求已完成任务
			getFinishTask() {
				console.log(uni.getStorageSync('phone'))
				getAppTask({
					phone: uni.getStorageSync('phone'),
					page: 1,
					pageSize: 6,
					key: '1'
				}).then(res => {
					console.log(JSON.stringify(res))
					this.tab_list[1].badge.value = res.data.total
				})
			},

			to_detail(id) {
				console.log('id---------' + id)
				if (this.tab_current == 0) {
					uni.navigateTo({
						url: '/pages/mine/work/pending?id=' + id
					})
				} else { 
					uni.navigateTo({ 
						url: '/pages/mine/work/finished?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>